<template>
	<view>
		<!-- 状态栏 -->
		<uni-status-bar bgcolor="#FFE933"></uni-status-bar>
		<!-- 关闭按钮 -->
		<view class="iconfont icon-guanbi" @tap="back"></view>
		<!-- 背景图 -->
		<image class="login-bg" src="../../static/common/loginhead.png" mode="widthFix" lazy-load></image>
		<!-- 输入表单 -->
		<view class="form">
			<!-- 登录 -->
			<template v-if="loginType === 1">
				<input v-model="form.nickname" class="uni-input" placeholder="请输入用户名" />
				<view class="password-box">
					<input password v-model="form.password" class="uni-input" placeholder="请输入密码" />
					<view class="forget" @tap="forget">忘记密码?</view>
				</view>
			</template>
			<!-- 注册 -->
			<template v-if="loginType === 2">
				<input v-model="form.nickname" class="uni-input" placeholder="请输入注册用户名" />
				<view class="password-box">
					<input password v-model="form.password" class="uni-input" placeholder="请输入注册密码" />
				</view>
			</template>
			<!-- 登录按钮 -->
			<button class="confirm" :disabled="!disable()" :class="{'active': disable()}" @tap="submit">{{loginType === 1 ? "登录" : "注册"}}</button>
		</view>
		<!-- 切换登录/注册 -->
		<view class="z-center d-flex jc-center ai-center" style="margin-top: 20upx;" @tap="toggleLoginType">
			<view>{{loginType === 2 ? "账号密码登录" : "注册账号"}}</view>
			<view class="iconfont icon-jinru"></view>
		</view>
		<!-- 第三方登录 -->
		<view class="login-other">
			<view class="z-center">第三方登录</view>
		</view>

		<other-login></other-login>

		<!-- 协议 -->
		<view class="lodin-agree d-flex jc-center ai-center" v-if="loginType === 2">注册即代表您同意
			<view class="agree" @tap="protocol">《仿糗事百科用户协议》</view>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from "components/official/uni-status-bar/uni-status-bar.vue"
	import otherLogin from "components/profile/other-login.vue"
	import {
		login,
		register
	} from "network/login.js"
	import * as Types from 'store/constants'
	export default {
		data() {
			return {
				loginType: 1, // 1:登录 2:注册
				form: {
					nickname: "",
					password: "",
				}
			};
		},
		components: {
			uniStatusBar,
			otherLogin
		},
		methods: {
			// 返回上一步
			back() {
				uni.navigateBack()
			},
			// 切换登录/注册
			toggleLoginType() {
				if (this.loginType === 1) {
					this.loginType = 2
				} else {
					this.loginType = 1
				}
				this.form = this.$options.data().form
			},
			// 验证是否可以登录/注册
			disable() {
				if (this.form.nickname.trim() && this.form.password.trim()) {
					return true
				}
				return false
			},
			// 登录/注册
			async submit() {
				if (this.disable()) {
					if (this.loginType === 1) {
						// 登录操作
						this.$store.dispatch(Types.loginAction, this.form).then(res => {
							uni.showToast({
								title: "登录成功"
							})
							this.$store.dispatch(Types.getUserDataAction, res.id)
							this.$store.dispatch(Types.getUserDescAction, res.id)
							uni.navigateBack()
						}).catch(errMsg => {
							uni.showToast({
								title: errMsg,
								icon: "none"
							});
						})
					} else {
						// 注册操作
						const res = await register(this.form)
						if (res.meta.code !== 200) {
							uni.showToast({
								title: res.data,
								icon: "none"
							});
							return false
						} else {
							uni.showToast({
								title: "注册成功"
							})
							this.loginType = 1
						}
					}
				}
				return false
			},
			// 协议书
			protocol() {
				uni.showToast({
					title: "暂不支持",
					icon: "none"
				})
			},
			forget() {
				uni.showToast({
					title: "暂不支持",
					icon: "none"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-bg {
		width: 100%;
	}

	.icon-guanbi {
		position: fixed;
		top: 20upx;
		left: 30upx;
		padding: 10upx;
		font-size: 40upx;
		font-weight: bolder;
		z-index: 9;
	}

	.form {
		padding: 0 30upx;

		.uni-input {
			margin: 23upx auto;
			padding: 14upx 12upx 6upx 12upx;
			height: 60upx;
			border-bottom: 1upx solid $uni-border-color;
		}

		.password-box {
			position: relative;

			.forget {
				position: absolute;
				top: 20upx;
				right: 0;
				width: 150upx;
				text-align: center;
				color: $uni-text-color-grey;
				line-height: 64upx;
				z-index: 10;
			}
		}

		.confirm {
			margin-top: 60upx !important;
			color: $uni-text-color-grey;
			background-color: $uni-text-color-disable;

			&.active {
				color: $uni-text-color;
				background-color: $uni-bg-color-btn;
			}
		}
	}

	.login-other {
		position: relative;
		margin: 80upx 0 20upx 0;
		color: $uni-text-color-grey;

		.z-center::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 25%;
			background-color: $uni-text-color-inverse;
			height: 2upx;
			width: 100upx;
		}
	}

	.login-other::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 25%;
		background-color: $uni-text-color-inverse;
		height: 2upx;
		width: 100upx;
	}

	.lodin-agree {
		padding-top: 60upx;
		color: $uni-text-color-grey;

		.agree {
			color: $uni-color-primary;
		}
	}
</style>
